<template>
  <div class="totalHistory">

    <el-timeline class="timeline infinite-list" :reverse="false">
      <el-timeline-item
        v-for="(historyItem,index) in historyList"
        class="timeline-item"
        :key="historyItem.id"
        :timestamp="formatDate(new Date(historyItem.timestamp),'yyyy-MM-dd hh:mm:ss')">
        <el-divider content-position="left" class="operation-divider">
          <b>{{ getOperationName(historyItem.operation) }}</b>
          <span>{{ getDisplayLabel(historyItem) }}</span>
        </el-divider>
        <div class="btnRow">
          <el-button type="info" round size="mini" @click="switchHistoryDetail(index)">详细信息</el-button>
          <el-button type="warning" round size="mini" @click="wantWithdraw(historyItem)">撤回到这一步</el-button>
        </div>
        <el-card :class="'hiddenCard card' + index">

          <div v-if="historyItem.operation == operationEnum.ADD_NODE">
            <p>URI: {{ historyItem.newObj.uri }}</p>
            <p>标签: {{ historyItem.newObj.label }}</p>
            <p>类型: {{ historyItem.newObj.type.name }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.EDIT_NODE">
            <el-divider content-position="left">原节点</el-divider>
            <p>URI: {{ historyItem.oldObj.uri }}</p>
            <p>标签: {{ historyItem.oldObj.label }}</p>
            <p>类型: {{ historyItem.oldObj.type.name }}</p>
            <el-divider content-position="left">编辑后</el-divider>
            <p>URI: {{ historyItem.newObj.uri }}</p>
            <p>标签: {{ historyItem.newObj.label }}</p>
            <p>类型: {{ historyItem.newObj.type.name }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.DELETE_NODE">
            <p>URI: {{ historyItem.oldObj.uri }}</p>
            <p>标签: {{ historyItem.oldObj.label }}</p>
            <p>类型: {{ historyItem.oldObj.type.name }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.ADD_LINK">
            <p>关系: {{ historyItem.newObj.predicate }}</p>
            <p>原节点ID: {{ historyItem.newObj.sId }}</p>
            <p>目标节点ID: {{ historyItem.newObj.tId }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.EDIT_LINK">
            <el-divider content-position="left">原连接</el-divider>
            <p>关系: {{ historyItem.oldObj.predicate }}</p>
            <p>原节点ID: {{ historyItem.oldObj.sId }}</p>
            <p>目标节点ID: {{ historyItem.oldObj.tId }}</p>
            <el-divider content-position="left">编辑后</el-divider>
            <p>关系: {{ historyItem.newObj.predicate }}</p>
            <p>原节点ID: {{ historyItem.newObj.sId }}</p>
            <p>目标节点ID: {{ historyItem.newObj.tId }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.DELETE_LINK">
            <p>关系: {{ historyItem.oldObj.predicate }}</p>
            <p>原节点ID: {{ historyItem.oldObj.sId }}</p>
            <p>目标节点ID: {{ historyItem.oldObj.tId }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.ADD_TYPE">
            <p>名称: {{ historyItem.newObj.name }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.EDIT_TYPE">
            <el-divider content-position="left">原类型</el-divider>
            <p>名称: {{ historyItem.oldObj.name }}</p>
            <p>颜色: {{ historyItem.oldObj.color }}</p>
            <p>半径: {{ historyItem.oldObj.r }}</p>
            <el-divider content-position="left">编辑后</el-divider>
            <p>名称: {{ historyItem.newObj.name }}</p>
            <p>颜色: {{ historyItem.newObj.color }}</p>
            <p>半径: {{ historyItem.newObj.r }}</p>
          </div>

          <div v-else-if="historyItem.operation == operationEnum.DELETE_TYPE">
            <p>名称: {{ historyItem.oldObj.name }}</p>
          </div>
        </el-card>
      </el-timeline-item>

      <transition name="el-fade-in-linear">
        <el-divider class="noMoreHistory" v-if="noMoreHistory">没有更多历史记录了</el-divider>
      </transition>

    </el-timeline>

  </div>
</template>

<script>
import { formatDate } from "@/utils/date/dateUtil";
import * as historyDisplayUtil from "@/utils/historyDisplay/historyDisplayUtil";
import { multiWithdrawAPI } from "@/api/kgeditor/withdraw";

export default {
  name: "totalHistoryComponent",
  data() {
    return {
      KG: this.$parent.$parent.$refs.graphComponent.KG,
      historyList: [],
      formatDate: formatDate,
      operationEnum: this.$parent.$parent.$refs.graphComponent.KG.historyManager.operationEnum,
      timelinePosition: 0,
      noMoreHistory: false,
      temp: false
    };
  },
  created() {
    this.historyList = this.KG.kgInfo.historyList;
  },
  mounted() {
    this.initScrollTimeLineEvent();
  },
  watch: {
    "KG.update.historyList": {
      handler: function() {
        this.historyList = null;
        this.historyList = this.KG.kgInfo.historyList;
      },
      deep: true
    }
  },
  methods: {
    initScrollTimeLineEvent() {
      let _this = this;

      let timeline = document.querySelector(".timeline");
      let totalHistory = document.querySelector(".totalHistory");

      let maxPosition = 10;

      totalHistory.addEventListener("mousewheel", function(e) {
        console.log(totalHistory.offsetHeight, timeline.offsetHeight);

        let nextPosition = timeline.offsetTop + e.deltaY / 5;

        let minPosition = totalHistory.offsetHeight - timeline.offsetHeight - 10;
        if (minPosition > 0) minPosition = -50;

        if (e.deltaY < 0 && nextPosition < minPosition) {
          nextPosition = minPosition;
          _this.noMoreHistory = true;
        }
        if (e.deltaY > 0 && nextPosition > maxPosition) {
          nextPosition = maxPosition;
          _this.noMoreHistory = false;
        }

        timeline.style.top = nextPosition + "px";
      });
    },
    wantWithdraw(historyItem) {
      let confirmMessage = "确定要撤回到执行" +
        this.getOperationName(historyItem.operation) +
        this.getDisplayLabel(historyItem) +
        "操作之前吗？(撤回操作不可撤回,当前选择操作也会被撤回)";
      this.$confirm(confirmMessage, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.withdraw(historyItem);
      });
    },
    withdraw(historyItem) {
      let historyList = this.historyList;
      let count = 1;
      for (let i = 0; historyItem.id != historyList[i].id && i < historyList.length; i++) {
        count++;
      }

      multiWithdrawAPI({
        kgID: this.KG.kgInfo.id,
        step: count
      }, () => {
        this.KG.withdrawHistory(historyItem.id);
        this.$message.success("撤回成功");
      }, (error) => {
        this.$message.error("撤回失败:" + error);
      },()=>{});
    },
    getDeletedCount(historyItem) {
      let res = { nodeCount: 0, linkCount: 0 };
      while (historyItem != null) {
        if (historyItem.operation === this.operationEnum.DELETE_NODE) res.nodeCount++;
        else if (historyItem.operation === this.operationEnum.DELETE_LINK) res.linkCount++;
        historyItem = historyItem.next;
      }
      return res;
    },
    switchHistoryDetail(index) {
      let card = document.querySelector(".card" + index);
      if (card.classList.contains("hiddenCard")) card.classList.remove("hiddenCard");
      else card.classList.add("hiddenCard");
    },
    getOperationName(operationEnumItem) {
      return historyDisplayUtil.getOperationName(this.operationEnum, operationEnumItem);
    },
    getDisplayLabel(historyItem) {
      return historyDisplayUtil.getDisplayLabel(this.operationEnum, historyItem);
    }
  }
};
</script>

<style>
.totalHistory {
  top: 0;
  height: 100%;
  margin-left: 30px;
  text-align: left;
}

.totalHistory .timeline {
  width: 100%;
  position: absolute;
}

.totalHistory .timeline-item {
  width: 100%;
}

.totalHistory .timeline-item .operation-divider {
  position: relative;
  top: 7px
}

.totalHistory .timeline-item .operation-divider span {
  margin-left: 5px;
  font-size: 10px;
  color: #909399;
  overflow: hidden;
  white-space: nowrap; /*内容超宽后禁止换行显示*/
  text-overflow: ellipsis; /*文字超出部分以省略号显示*/
}

.totalHistory .timeline-item p {
  width: 80%;
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap; /*内容超宽后禁止换行显示*/
  text-overflow: ellipsis; /*文字超出部分以省略号显示*/
}

.totalHistory .timeline-item p:last-child {
  margin-bottom: 0;
}

.totalHistory .timeline-item .btnRow {
  margin-bottom: 10px;
}

.totalHistory .timeline-item .hiddenCard {
  display: none;
}

.totalHistory .noMoreHistory {
  /*position: absolute;*/
  /*bottom: 10px;*/
  margin-top: 30px;
  width: 80%;
  color: #c8c8c8;
}

.totalHistory-enter {
  opacity: 0;
  transform: translateY(45px);
}

.totalHistory-enter-to {
  opacity: 1;
}

.totalHistory-enter-active {
  transition: all 1s;
}

.totalHistory-leave {
  transform: translateY(45px);
}

.totalHistory-leave-active {
  transition: all 1s;
  position: absolute;
}

.totalHistory-leave-to {
  transform: translateY(-45px);
  opacity: 0;
}

.totalHistory-move {
  transition: transform 2s;
}
</style>
